<template>
    <div class="supply container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h1 class="panel-title">行政区域</h1>
                </el-col>
            </el-row>
            <el-table
                ref="customerTable"
                :data="tableData"
                stripe
                lazy
                row-key="id"
                :load="load"
                style="width: 100%; margin-top: 10px"
                :tree-props="{
                    children: 'children',
                    hasChildren: 'hasChildren',
                }"
            >
                <el-table-column
                    prop="areaName"
                    label="行政区域名称"
                ></el-table-column>
                <el-table-column
                    prop="areaPinyin"
                    label="行政区域拼音码"
                ></el-table-column>
                <el-table-column
                    prop="areaCode"
                    label="行政区域编码"
                ></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="新增"
                            placement="bottom"
                            v-if="scope.row.level !== 3"
                        >
                            <el-button
                                plain
                                icon="el-icon-plus"
                                @click="add(scope.$index, scope.row)"
                                size="mini"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="table-pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <el-dialog
            :title="currentRow.areaName"
            :visible.sync="addDialog"
            width="30%"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="70px"
                class="demo-ruleForm"
            >
                <el-form-item label="城市：" prop="city">
                    <el-input
                        v-model="ruleForm.city"
                        placeholder="请输入你需要添加的城市"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="handleAddArea"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getAreaList, addArea } from "@/api/area/area";

export default {
    name: "index",
    data() {
        return {
            tableData: [],
            total: 0,
            currentPage: 1,
            limit: 10,
            addDialog: false,
            currentRow: {},
            ruleForm: {
                city: "",
            },
            rules: {
                city: [
                    {
                        required: true,
                        message: "请输入城市名称",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.queryList();
    },
    methods: {
        queryList() {
            getAreaList({
                level: 1,
                page: this.currentPage,
                limit: this.limit,
            }).then((res) => {
                this.total = res.total;
                this.tableData = res.rows.map((item) => {
                    return {
                        ...item,
                        hasChildren: true,
                    };
                });
            });
        },
        load(tree, treeNode, resolve) {
            getAreaList({
                parentId: tree.id,
            })
                .then((res) => {
                    if (tree.level === 2 || tree.level === 3) {
                        resolve(res.rows);
                    } else {
                        let data = res.rows.map((item) => {
                            return {
                                ...item,
                                hasChildren: true,
                            };
                        });
                        resolve(data);
                    }
                })
                .catch(() => {
                    resolve();
                });
        },
        add(index, row) {
            this.addDialog = true;
            this.currentRow = row;
        },
        handleAddArea() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    addArea({
                        areaName: this.ruleForm.city,
                        parentId: this.currentRow.id,
                        level: this.currentRow.level + 1,
                    }).then((res) => {
                        if (res.code === 200) {
                            this.$message.success("新增成功");
                            this.addDialog = false;
                            this.queryList();
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //导出
        exporting() {},
        handleSizeChange(val) {
            this.limit = val;
            this.queryList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.queryList();
        },
    },
};
</script>

<style scoped></style>
